@charset "utf-8";
/* 
.micro_metric{
    display: grid;
    background: white;
    width: 85%;
    height: 90vh;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: 15% repeat(4, 1fr);
    gap: 2px;
} */

.metric_item {
    background: none;
    border: 1px solid hsl(0, 0%, 80%);
    padding: 0px;
    margin: 0px;
    /* box-sizing: border-box; */
    /* align-content: center;
    align-items: center; */

}



.layout {
    width: 100vw;
    height: 100vh;
    /* text-align: center; */
    display: grid;
    grid-template-areas:
        'header header'
        'leftSide content';
    gap: 1px;
}

.header {
    grid-area: header;
    background: whitesmoke;
    font-size: 2vw;
    font: "Fira Sans", sans-serif;
    text-align: center;
    height: 5vh;
    width: 100vw;
}

.leftSide {
    grid-area: leftSide;
    width: 13vw;
    height: 95vh;
    background: whitesmoke;
    font-size: 20px;
    font: "Fira Sans", sans-serif;

}

#content {
    grid-area: content;
    background: none;
    width: 87vw;
    height: 95vh;

    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(4, 1fr);
}